import 'package:flutter/material.dart';

import 'package:flutter/cupertino.dart';

class ExpandedComp2 extends StatelessWidget {
  const ExpandedComp2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded扩展'),
        backgroundColor: Colors.pink,
      ),
      body: Center(
        child: Container(
          height: 100,
          color: Colors.red,
          padding: const EdgeInsets.all(10),
          child: Row(
            children: [
              Image.network(
                'https://yanxuan-item.nosdn.127.net/afd6199278a5b8fd783bc4947960fabc.jpg',
                width: 86,
              ),

              // 问题：文字超出了父组件的范围
              // const Text('茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯'),

              // 解决：使用Expanded弹性布局组件解决文字溢出的问题
              const Expanded(
                child: Text('茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class StackComp extends StatelessWidget {
  const StackComp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('堆叠容器'),
        backgroundColor: Colors.pink,
      ),
      body: Center(
        child: Stack(
          // 超出部分处理
          // 1. 不裁剪超出部分
          clipBehavior: Clip.none,
          // 2. 组件对齐方式
          alignment: Alignment.center,
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.cyan,
            ),
            // Image组件参照Container四个角定位
            Positioned(top: -105, child: Image.asset('open_eyes.png'))
          ],
        ),
      ),
    );
  }
}

//

class KunComp extends StatelessWidget {
  const KunComp({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. 提供的数据
    const Map orderInfo = {
      'createTime': "2024-08-15 21:49:48",
      'orderState': "待发货",
      'image':
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      'name': "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
      'totalNum': 2,
      'curPrice': 119.5,
      'attrsText': "规格: 白色240ml"
    };

    return Scaffold(
        appBar: AppBar(
            title: const Text('案例-商品订单信息'),
            backgroundColor: Color.fromRGBO(40, 163, 175, 1)),
        body: Container(
          padding: const EdgeInsets.all(10),
          color: Colors.white,
          child: Column(
            children: [
              // 1. 订单时间和订单状态
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 1.1 创建时间
                  Text(
                    orderInfo['createTime'],
                    style: const TextStyle(
                        color: Color.fromARGB(255, 38, 39, 142), fontSize: 13),
                  ),
                  // 1.2 订单状态
                  Text(
                    orderInfo['orderState'],
                    style: const TextStyle(color: Colors.orange),
                  )
                ],
              ),
              // 2. 商品图片+名称+数量+规格+单价
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Row(
                  children: [
                    // 2.1 左侧商品图片
                    Image.network(
                      'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                    ),
                    // 2.2 右侧: 名称+数量+规格+单价
                    Expanded(
                        child: Padding(
                      padding: const EdgeInsets.only(left: 10),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 2.2.1 名称+数量
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              // 名称
                              Expanded(child: Text(orderInfo['name'])),
                              // 数量
                              Padding(
                                padding: const EdgeInsets.only(left: 10),
                                child: Text('x ${orderInfo['totalNum']}'),
                              )
                            ],
                          ),
                          // 2.2.2 规格
                          Padding(
                            padding: const EdgeInsets.only(top: 5),
                            child: Container(
                              padding: const EdgeInsets.only(
                                  left: 5, right: 5, top: 3, bottom: 3),
                              decoration: BoxDecoration(
                                  color:
                                      const Color.fromARGB(255, 249, 247, 247),
                                  borderRadius: BorderRadius.circular(10)),
                              child: Text(
                                orderInfo['attrsText'],
                                style: const TextStyle(color: Colors.grey),
                              ),
                            ),
                          ),
                          // 2.2.3 价格
                          Padding(
                            padding: const EdgeInsets.only(top: 5),
                            child: Text('¥${orderInfo['curPrice']}'),
                          ),
                        ],
                      ),
                    ))
                  ],
                ),
              ),
              // 3. 合计
              Padding(
                  padding: const EdgeInsets.only(top: 10),
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: Text(
                        '合计: ¥ ${orderInfo['curPrice'] * orderInfo['totalNum']}'),
                  )),
              // 4. 再次购买
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Container(
                  alignment: Alignment.centerRight,
                  child: Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 3, vertical: 5),
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color.fromARGB(255, 41, 40, 40))),
                    child: const Text(
                      '再次购买',
                      style: TextStyle(color: Color.fromARGB(255, 68, 68, 68)),
                    ),
                  ),
                ),
              )
            ],
          ),
        ));
  }
}

class ListViewDemo1 extends StatelessWidget {
  const ListViewDemo1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView的基础使用'),
        backgroundColor: Colors.red,
      ),
      body: ListView(
        // 滚动效果：禁用滚动
        // physics: const NeverScrollableScrollPhysics(),
        // 滚动方向1：纵向滚动(默认的)
        scrollDirection: Axis.vertical,
        // 滚动方向2：横向滚动
        // scrollDirection: Axis.horizontal,
        children: [
          Container(
            height: 80,
            color: Colors.blue,
            alignment: Alignment.centerLeft,
            child: const Text('鸿蒙大事件1'),
          ),
          Container(
            height: 90,
            color: Colors.pink,
            alignment: Alignment.centerLeft,
            child: const Text('鸿蒙大事件2'),
          ),
          Container(
            height: 100,
            color: Colors.teal,
            alignment: Alignment.centerLeft,
            child: const Text('鸿蒙大事件3'),
          ),
          Container(
            height: 110,
            color: Colors.green,
            alignment: Alignment.centerLeft,
            child: const Text('鸿蒙大事件4'),
          ),
          Container(
            height: 120,
            color: Colors.cyan,
            alignment: Alignment.centerLeft,
            child: const Text('鸿蒙大事件5'),
          ),
          Container(
            height: 130,
            color: Colors.orange,
            alignment: Alignment.centerLeft,
            child: const Text('鸿蒙大事件6'),
          ),
          Container(
            height: 140,
            color: Colors.blue,
            alignment: Alignment.centerLeft,
            child: const Text('鸿蒙大事件7'),
          ),
          Container(
            height: 150,
            color: Colors.green,
            alignment: Alignment.centerLeft,
            child: const Text('鸿蒙大事件8'),
          ),
          Container(
            height: 160,
            color: Colors.red,
            alignment: Alignment.centerLeft,
            child: const Text('鸿蒙大事件9'),
          ),
        ],
      ),
    );
  }
}

class ListView2 extends StatelessWidget {
  const ListView2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 1. 导航条/////////////////////////////////
      appBar: AppBar(
        title: const Text(
          '列表使用-方式2',
          //文本样式
          style: TextStyle(
              color: Color.fromARGB(255, 38, 83, 173),
              fontSize: 24,
              fontWeight: FontWeight.w600,

              
              
              ),

        ),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
//AppBar///////////////////////////////////

      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 100,
            color: Colors.red[90],
            child: Container(
              padding: const EdgeInsets.all(10),
              child: Row(
                children: [
                  Image.network(
                    'https://yanxuan-item.nosdn.127.net/e529b6ab111ade9da9314867f98d360f.png',
                    width: 90,
                  ),
                  const Expanded(
                      child: Text(
                    '海尔（Haier）波轮洗衣机全自动家用 10公斤大容量 直驱变频 一级能效 高效精华洗 以旧换新EB100B37Mate5',
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  )),
                  const Padding(
                    padding: EdgeInsets.only(left: 10),
                    child: Icon(Icons.access_time_filled),
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}


class ListView3 extends StatelessWidget {
  const ListView3({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // 1. 导航条
        appBar: AppBar(
          title: const Text(
            '列表使用-方式3',
            style: TextStyle(
              color: Color.fromARGB(255, 38, 83, 173),
              fontSize: 24,
              fontWeight: FontWeight.w600,
              
              
              ),
          ),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        body: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
               return Container(
                height: 100,
                color: Colors.red[90],
                child: Container(
                  padding: const EdgeInsets.all(10),
                  child: Row(
                    children: [
                      Image.network(
                        'https://yanxuan-item.nosdn.127.net/e529b6ab111ade9da9314867f98d360f.png',
                        width: 90,
                      ),
                      const Expanded(
                          child: Text(
                        '海尔（Haier）波轮洗衣机全自动家用 10公斤大容量 直驱变频 一级能效 高效精华洗 以旧换新EB100B37Mate5',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      )),
                      const Padding(
                        padding: EdgeInsets.only(left: 10),
                        child: Icon(Icons.access_time_filled),
                      ),
                    ],
                  ),
                ),
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return Container(

                margin: const EdgeInsets.only(left: 9, right: 8),
                height: 2,
               color: const Color.fromARGB(255, 92, 58, 58),

              );
            },
            itemCount: 30
        ));
  }
}


//////////////////////////

class ListViewDemo extends StatelessWidget {
  const ListViewDemo({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. 提供的数据
    const Map orderInfo = {
      'createTime': "2024-08-15 21:49:48",
      'orderState': "待发货",
      'image':
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      'name': "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
      'totalNum': 2,
      'curPrice': 119.5,
      'attrsText': "规格: 白色240ml"
    };

    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView综合案例'),
        backgroundColor: Colors.pink,
      ),
      body: ListView.separated(
          itemBuilder: (BuildContext context, int index) {
            return Container(
              padding: const EdgeInsets.all(15),
              color: Colors.white,
              child:  Column(
                  children: [
                    // 1. 订单时间和订单状态
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        // 1.1 创建时间
                        Text(
                          orderInfo['createTime'],
                          style: const TextStyle(
                              color: Color.fromARGB(255, 70, 69, 69),
                              fontSize: 13),
                        ),
                        // 1.2 订单状态
                        Text(
                          orderInfo['orderState'],
                          style: const TextStyle(color: Colors.orange),
                        )
                      ],
                    ),
                    // 2. 商品图片+名称+数量+规格+单价
                    Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Row(
                        children: [
                          // 2.1 左侧商品图片
                          Image.network(
                            'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
                            width: 100,
                            height: 100,
                            fit: BoxFit.cover,
                          ),
                          // 2.2 右侧: 名称+数量+规格+单价
                          Expanded(
                              child: Padding(
                            padding: const EdgeInsets.only(left: 10),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                // 2.2.1 名称+数量
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    // 名称
                                    Expanded(child: Text(orderInfo['name'])),
                                    // 数量
                                    Padding(
                                      padding: const EdgeInsets.only(left: 10),
                                      child: Text('x ${orderInfo['totalNum']}'),
                                    )
                                  ],
                                ),
                                // 2.2.2 规格
                                Padding(
                                  padding: const EdgeInsets.only(top: 5),
                                  child: Container(
                                    padding: const EdgeInsets.only(
                                        left: 5, right: 5, top: 3, bottom: 3),
                                    decoration: BoxDecoration(
                                        color: const Color.fromARGB(
                                            255, 249, 247, 247),
                                        borderRadius:
                                            BorderRadius.circular(10)),
                                    child: Text(
                                      orderInfo['attrsText'],
                                      style:
                                          const TextStyle(color: Colors.grey),
                                    ),
                                  ),
                                ),
                                // 2.2.3 价格
                                Padding(
                                  padding: const EdgeInsets.only(top: 5),
                                  child: Text('¥${orderInfo['curPrice']}'),
                                ),
                              ],
                            ),
                          ))
                        ],
                      ),
                    ),
                    // 3. 合计
                    Padding(
                        padding: const EdgeInsets.only(top: 10),
                        child: Container(
                          alignment: Alignment.centerRight,
                          child: Text(
                              '合计: ¥ ${orderInfo['curPrice'] * orderInfo['totalNum']}'),
                        )),
                    // 4. 再次购买
                    Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Container(
                        alignment: Alignment.centerRight,
                        child: Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 3, vertical: 5),
                          decoration: BoxDecoration(
                              border: Border.all(
                                  color:
                                      const Color.fromARGB(255, 41, 40, 40))),
                          child: const Text(
                            '再次购买',
                            style: TextStyle(
                                color: Color.fromARGB(255, 68, 68, 68)),
                          ),
                        ),
                      ),
                    )
                  ],
                )
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return Container(
              height: 8,
              color: Colors.grey,
            );
          },
          itemCount: 10),
    );
  }
}


///
///
///
///
 
class GridViewDemo1 extends StatelessWidget {
  const GridViewDemo1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView案例1'),
        backgroundColor: Colors.red,
      ),
      body: GridView(
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent
        //
        //SliverGridDelegateWithFixedCrossAxisCount
        (
          // 侧轴方向子元素的个数
    //      crossAxisCount: 3, 
          maxCrossAxisExtent: 100,

          mainAxisSpacing: 10,
          crossAxisSpacing: 5,
          childAspectRatio: 4/3
        ),
        children:  [
          Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('黑马程序员1'),
          ),
           Container(
            color: Colors.pink,
            alignment: Alignment.center,
            child: const Text('黑马程序员2'),
          ),
           Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('黑马程序员3'),
          ),
           Container(
            color: Colors.yellow,
            alignment: Alignment.center,
            child: const Text('黑马程序员4'),
          ),
           Container(
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('黑马程序员5'),
          ),
           Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('黑马程序员6'),
          )
        ],
      ),
    );
  }
}


///
///
///
///
///

class GridView2 extends StatelessWidget {
  const GridView2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView组件'),
      ),
      body: GridView.builder(
        // 主轴(垂直)默认为垂直方向，此属性用于固定侧轴(水平)方向子元素的个数
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
          mainAxisSpacing: 10.0, // 1.2 主轴(垂直)方向子元素间距
          crossAxisSpacing: 5.0, // 1.3 侧轴(水平)方向子元素间距
          childAspectRatio: 4 / 3, // 1.4 子元素宽高比，默认宽高相同 1: 1
        ),
        // 子元素数量
        itemCount: 30,
        // 构造子元素
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: Text('传智播客 $index'),
          );
        },
      ),
    );
  }
}

class GridView3 extends StatelessWidget {
  const GridView3({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView组件'),
      ),
      body: GridView.extent(
        // 主轴(垂直)默认为垂直方向，此属性用于固定侧轴(水平)方向子元素的最大宽度
        maxCrossAxisExtent: 100.0, // 设置侧轴方向子元素宽度，，此时每行展示的子元素个数是变化的
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 5.0,
        childAspectRatio: 4 / 3,
        children: [
          Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text('传智播客1'),
          ),
          Container(
            color: Colors.orange,
            alignment: Alignment.center,
            child: const Text('传智播客2'),
          ),
          Container(
            color: Colors.yellow,
            alignment: Alignment.center,
            child: const Text('传智播客3'),
          ),
          Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('传智播客4'),
          ),
          Container(
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('传智播客5'),
          ),
          Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('传智播客6'),
          ),
          Container(
            color: Colors.purple,
            alignment: Alignment.center,
            child: const Text('传智播客6'),
          ),
        ],
      ),
    );
  }
}
///
///
///
///
///
///
class CustomScrollViewWidget extends StatelessWidget {
  const CustomScrollViewWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CustomScrollView组件'),
      ),
      body: CustomScrollView(
        slivers: [
          // 1. 上部分：展示网格布局
          SliverGrid.builder(
            // 主轴(垂直)默认为垂直方向，此属性用于固定侧轴(水平)方向子元素的个数
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
              mainAxisSpacing: 5.0, // 1.2 主轴(垂直)方向子元素间距
              crossAxisSpacing: 5.0, // 1.3 侧轴(水平)方向子元素间距
              childAspectRatio: 4 / 3, // 1.4 子元素宽高比，默认宽高相同 1: 1
            ),
            // 子元素数量
            itemCount: 6,
            // 构造子元素
            itemBuilder: (BuildContext context, int index) {
              return Container(
                color: Colors.pink,
                alignment: Alignment.center,
                child: Text('传智播客 $index'),
              );
            },
          ),
          // 3. 上下两部分的间距
          SliverPadding(padding: EdgeInsets.only(bottom: 5)),
          // 2. 下部分：展示列表布局 (delegate类似于ListView的builder构造方法)
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  padding: const EdgeInsets.only(bottom: 5),
                  child: Container(
                    height: 120.0,
                    color: Colors.orange,
                    alignment: Alignment.centerLeft,
                    child: Text('传智教育 $index'),
                  ),
                );
              },
              // 子元素个数
              childCount: 10,
            ),
          )
        ],
      ),
    );
  }
}
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///






///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///
///










